<template>
  <div class="search">
    <header>
      <div class="header-l" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <div class="header-m">
        <img src="@/assets/img/search.png" alt="" />
        <input type="text" placeholder="搜您喜欢的..." v-model="value" />
      </div>
      <div class="header-r" @click="search">搜索</div>
    </header>
    <section>
      <div class="search-history" v-if="show">
        <div class="history-t flex">
          <div><van-icon name="clock-o" /> <span>历史搜索</span></div>
          <div @click="del">
            <van-icon name="delete-o" />
          </div>
        </div>
        <ul>
          <li v-for="(item, index) in searchArr" :key="index" @click="goSearch(item)">
            {{ item }}
            <div class="del" v-if="false">
              <van-icon name="clear" color="#b0352f" />
            </div>
          </li>
        </ul>
      </div>
      <div class="search-rec search-history">
        <div class="rec-t history-t">
          <van-icon name="fire" color="#b0352f" />
          <span>热门搜索</span>
        </div>
        <ul>
          <li v-for="item in 9" :key="item" @click="goSearch(item)">易冲泡茶叶</li>
        </ul>
      </div>
      <div class="main">
        <div class="title">
          <van-icon name="good-job-o" />
          <span>推荐商品</span>
        </div>
        <div class="list">
          <ul>
            <li v-for="item in billList" :key="item.id">
              <div class="img">
                <img :src="item.imgUrl" alt="" />
                <span class="tip"> {{ item.tip }} </span>
              </div>
              <p class="txt">{{ item.title }}</p>
              <p class="price">
                <span
                  ><i>{{ item.price }}</i
                  >元</span
                >
                <em v-if="item.stutes">
                  <i class="el-icon-s-shop"></i> 约{{ item.unit }}元/斤
                </em>
              </p>
            </li>
          </ul>
        </div>
      </div>
    </section>
    <div class="right-btn">
      <van-icon name="service-o" size="24" />
    </div>
    <Tabbar />
  </div>
</template>

<script>
import Tabbar from "@/components/common/Tabbar.vue";
import { getBill } from "@/utils/api/api";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      billList: [],
      searchArr: [],
      value: "",
      show: false,
    };
  },
  components: {
    Tabbar,
  },
  beforeMount() {
    getBill().then((res) => {
      // console.log(res.data.data.data[0].billData);
      this.billList = res.data.data.data[0].billData;
    });
    this.getData()
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getData() {
      this.searchArr = JSON.parse(localStorage.getItem("searchList"));
    },
    search() {
      if (this.value === "") return;
      if (!localStorage.getItem("searchList")) {
        localStorage.setItem("searchList", "[]");
      } else {
        this.searchArr = JSON.parse(localStorage.getItem("searchList"));
      }
      this.searchArr.unshift(this.value);
      let newArr = new Set(this.searchArr);
      localStorage.setItem("searchList", JSON.stringify(Array.from(newArr)));
      this.$router.push({
       path:'/searchList',
       query: {
        value :this.value
       }
      })
      this.value = ''
    },
    goSearch(item) {
      this.$router.push({
        path:'/searchList',
       query: {
        value :item
       }
      })
    },
    del() {
      Dialog.confirm({
        title: "确定删除全部消息记录",
      })
        .then(() => {
          // on confirm
          this.searchArr = [];
          localStorage.removeItem("searchList");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  watch : {
    searchArr() {
     if(!localStorage.getItem("searchList")) {
        this.show = false
     } else {
      this.show = true
     }
    }
  }
};
</script>

<style lang="less" scoped>
.search {
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #b0352f;
    color: #fff;
    height: 2.75rem;
    .header-l {
      width: 2.75rem;
      text-align: center;
    }
    .header-m {
      height: 1.875rem;
      border-radius: 1.875rem;
      background: #fff;
      display: flex;
      align-items: center;
      flex: 1;
      padding: 0 0.625rem;
      img {
        width: 1.25rem;
      }
      input {
        margin-left: 0.625rem;
        outline: none;
        border: none;
        color: #000;
      }
    }
    .header-r {
      width: 2.75rem;
      height: 2.75rem;
      line-height: 2.75rem;
      text-align: center;
    }
  }
  section {
    padding: 10px 0;
    background: #f5f5f5;
    margin-bottom: 47px;
    margin-top: 44px;
    .search-history {
      padding: 0 20px;
      .rec-t {
        i {
          color: #b0352f;
        }
      }
      .history-t {
        font-size: 16px;
        margin-bottom: 15px;
      }
      .flex {
        display: flex;
        justify-content: space-between;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          position: relative;
          border: 1px solid #ddd;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          color: #999;
          margin-right: 15px;
          margin-bottom: 15px;
          .del {
            position: absolute;
            right: -8px;
            top: -12px;
          }
        }
      }
    }
    .main {
      .title {
        border-bottom: 1px #f5f5f5 solid;
        padding: 20px;
        font-size: 16px;
      }
      .list {
        ul {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          background: #f5f5f5;
          li {
            box-sizing: border-box;
            background: #fff;
            width: 49.9%;
            padding: 11px;
            margin-bottom: 7.5px;
            .img {
              width: 100%;
              position: relative;
              img {
                width: 100%;
              }
              .tip {
                position: absolute;
                bottom: 0;
                left: -11px;
                background: rgba(0, 0, 0, 0.4);
                font-size: 12px;
                color: #fff;
                width: 100%;
                padding: 4px 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .txt {
              font-size: 14px;
              color: #333;
              line-height: 30px;
              padding: 6px 0;
              // height: 30px;
              overflow: hidden;
              box-sizing: border-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .price {
              display: flex;
              justify-content: space-between;
              span {
                color: #ff6600;
                font-size: 14px;
                i {
                  font-size: 18px;
                }
              }
              em {
                color: #999999;
                font-size: 12px;
                padding: 5px 5px 0;
                i {
                  font-size: 14px;
                  padding-right: 3px;
                }
              }
            }
          }
        }
      }
    }
  }
  .right-btn {
    position: fixed;
    bottom: 60px;
    right: 10px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    color: #fff;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>